<!DOCTYPE html>
<html>
    <head>
        <title>33练习：TAB选项卡</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 440px;
                height: 298px;
                border: 1px solid #000;
                margin: 50px auto;
            }
            .nav>li{
                list-style: none;
                width: 110px;
                height: 50px;
                background: orange;
                text-align: center;
                line-height: 50px;
                float: left;
            }
            .nav>.current{
                background: #ccc;
            }
            .content>li{
                list-style: none;
                display: none;
            }
            img{
                width: 200px;
                height: 200px;
            }
            .content>.show{
                display: block;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            $(function (param) {  
                /*
                //1.监听选项卡的移入事件
                $(".nav>li").mouseenter(function (param) {  
                    //1.1修改背景选项卡的颜色
                    $(this).addClass("current");
                    //1.2获取当前移入选项卡的索引
                    var index=$(this).index();
                    console.log(index);
                    //1.3根据索引找到对应的图片
                    var $li=$(".content>li").eq(index);
                    //1.4显示找到的图片
                    $li.addClass("show");
                });
                //2.监听选项卡的移出事件
                $(".nav>li").mouseleave(function (param) {  
                    //1.1还原背景选项卡的颜色
                    $(this).removeClass("current");
                    //1.2获取当前移出选项卡的索引
                    var index=$(this).index();
                    //1.3根据索引找到对应的图片
                    var $li=$(".content>li").eq(index);
                    //1.4隐藏对应的图片
                    $li.removeClass("show");

                });
                */
                //1.监听选项卡的移入事件
                $(".nav>li").mouseenter(function (param) {
                     //1.1修改背景选项卡的颜色
                     $(this).addClass("current");
                     //1.2还原其他兄弟选项卡的背景颜色
                     $(this).siblings().removeClass("current");
                     //1.3获取当前移出选项卡的索引
                    var index=$(this).index();
                    //1.4根据索引找到对应的图片
                    var $li=$(".content>li").eq(index);
                    //1.5隐藏非当前的其他图片
                    $li.siblings().removeClass("show");
                    //1.6显示对应的图片
                    $li.addClass("show");
                })
            });
        </script>
    </head>
    <body>
        <div class="box">
            <ul class="nav">
                <li class="current">H5+C3</li>
                <li>jQuery</li>
                <li>C语言</li>
                <li>Go语言</li>
            </ul>
            <ul class="content">
                <li class="show"><img src="img/nezha.jpg" alt=""></li>
                <li><img src="img/login.jpg" alt=""></li>
                <li><img src="img/nezha.jpg" alt=""></li>
                <li><img src="img/login.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>